<template>
    <div class="main">
		<img class="banner" src="../../static/img_02.jpg"/>
		<h3 class="service">精选服务</h3>	
		<div class="serviceList">
			<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>	
				<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>
			<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>	
			<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>
			<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>
			<dl class="more">
				<dd>
					暂无更多内容
				</dd>	
			</dl>
		</div>
		<h3 class="service">精选服务</h3>	
		<div class="serviceList">
			<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>	
				<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>
			<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>	
			<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>
			<dl>
				<dt><img src="../../static/img_02.jpg"/></dt>
				<dd>Bubble小气泡·毛孔深层清洁管理</dd>	
				<dd><strong>￥199.00</strong><span>首单立减100</span></dd>	
			</dl>
			<dl class="more">
				<dd>
					暂无更多内容
				</dd>	
			</dl>
		</div>
	</div>
</template>
<script>
export default {
      data () {
            return {
            }
    }
}
</script>
<style lang="less" scoped>
.banner{
	width: 100%;
	height: 4.62rem;
	margin-top: .42rem
}
.main{
	width: 100%;
	padding-bottom: 1.6rem;
}
.service{
	width: 1.86rem;
	height: .48rem;
	text-align: center;
	margin:.42rem .33rem;
	border: .03rem solid #000;
	background: #ffe55c;
	line-height: .48rem;
	border-radius: .07rem;
	color: #272727;
}
.serviceList{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	overflow-x: scroll;
	padding-bottom: .46rem;
	box-sizing: border-box;
	background: #fff;
	dl{
		width: 7.38rem;
		margin-left: .33rem;
	
		dt{
			width: 7.38rem;
			img{
				width: 100%;
				height: 4.32rem;
				border-radius: .09rem;
			}
		}
		dd{
			margin-top: .17rem;
			strong{
				color: #f00;
				font-weight: bold;
				display: inline-block;
				margin-right: .2rem;
			}
			span{
				display: inline-block;
				background: red;
				color: #fff;
				height: .4rem;
				line-height: .4rem;
				padding: 0 .2rem;
				background:  linear-gradient(left,orange,#f00);
				border-radius: .07rem;
				
			}
		}
		
	}
	.more{
	height: 4.32rem;
	background: #fefefe;
	text-align: center;
	display: flex;
	align-items: center;
	margin-right: .1rem;
	border-radius: .09rem;
	dd{
		padding: .1rem;
	}
}
}
</style>
